<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用CSS设置canvas大小会带来canvas.width的不正确</title>
  <style>
      body {
          background: #dddddd;
      }

      #canvas {
          margin: 10px;
          padding: 10px;
          background: #ffffff;
          border: thin inset #aaaaaa;
      }
  </style>
</head>
<body>
<!--canvas的默认大小是300*150像素-->
<!--设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小-->
<canvas id="canvas" width="600" height="300">
  Canvas不被支持
</canvas>
<button onclick="toImg()">转为图片下载</button>
<button onclick="toBlob()">转为图片Blob下载</button>

</body>
<script >
  // 绘制文字
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d')

  function drawText(text) {
    ctx.font = '50px Arial';
    ctx.fillStyle ='cornflowerblue'
    ctx.strokeStyle = 'blue'
    ctx.save()
    ctx.fillStyle = 'yellow'
    const textWidth = ctx.measureText(text).width
    const textHeight = ctx.measureText(text).actualBoundingBoxAscent + ctx.measureText(text).actualBoundingBoxDescent
    const x = (canvas.width - textWidth) / 2  //计算文字水平中心点
    const y = (canvas.height + textHeight) / 2 //计算文字垂直中心点
    ctx.fillText(text, x, y);
    ctx.strokeText(text,x,y)
    ctx.restore()
    ctx.fillText(text, 50,60)
  }
  drawText('测试')

  // function test(){
  //   ctx.fillStyle = 'red'
  //   ctx.save()
  //   ctx.fillStyle = 'blue'
  //   ctx.beginPath()
  //   ctx.fillRect(0,0,100,100)
  //   ctx.restore()
  //   // ctx.beginPath()
  //   ctx.fillRect(100,100,100,100)
  // }
  // test()
  // 转为图片并下载
  function toImg() {
    const img = canvas.toDataURL('image/png')
    const a = document.createElement('a')
    a.href = img
    a.download = 'img.png'
    a.click()
    a.remove()
  }

  // 转为blob并下载
  function toBlob() {
    canvas.toBlob(function (blob) {
      const a = document.createElement('a')
      const url = URL.createObjectURL(blob)
      a.href = url
      a.download = 'blob.png'
      a.click()
      a.remove()
      URL.revokeObjectURL(url)
    })
  }


</script>
</html>